<template>
  <div :class="['aside', state.collapsed ? 'collapsed' : '']" v-if="state.childList && state.childList.length">
    <a-menu v-model:selectedKeys="state.selectedKeys" :open-keys="state.openKeys" mode="inline"
      :inline-collapsed="state.collapsed">
      <template v-for="item in state.childList" :key="item.path">
        <route-menus :route="item" class="ss" :menuArr="menuArr" v-if="menuArr.includes(item.path)" />
      </template>
    </a-menu>
    <div :class="['collapsedArea', state.collapsed ? 'collapsed' : '']">
      <i @click="toggleCollapsed" v-if="state.collapsed" class="iconfont icon-expand">
      </i>
      <i @click="toggleCollapsed" v-else class="iconfont icon-a-putaway"> </i>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, toRefs, watch } from "vue";
import { systemStore } from "@/store/modules/systemStore";
import RouteMenus from "@/components/routerMenus/index.vue";
import menuList from "@/router/asyncRouters";
import { MenuProps } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { cloneDeep } from "lodash";
import getters from "@/store/getters";
import { dataSourceType, } from "@/type.d";

interface MenusProps extends MenuProps { };
//withDefaults(defineProps<MenusProps>(), {});

// 当前路由

const menus = getters.userInfo().menues;
const menuArr = ref<string[]>([])
const currentRoute = useRoute();
const router = useRouter();
const sysStore = systemStore();
const state: any = reactive({
  collapsed: false,
  openKeys: [] as string[],
  selectedKeys: [currentRoute.fullPath] as string[],
  preOpenKeys: [""],
  childList: menuList[0].children
});

// 根据activeMenu获取指定的menu
const getTargetMenuByActiveMenuName = (activeMenu: any) => {
  return router.getRoutes().find((n: any) => [n.fullPath, n.path].includes(activeMenu));
};

// 获取当前打开的子菜单
const getOpenKeys = () => {
  const meta = currentRoute.meta;
  if (meta?.activeMenu) {
    const targetMenu = getTargetMenuByActiveMenuName(meta.activeMenu);
    return targetMenu?.meta?.namePath ?? [meta?.activeMenu];
  }

  return (meta?.hideInMenu
    ? state?.openKeys || []
    : currentRoute.meta?.namePath ??
    currentRoute.matched.map((n) => n.path)) as string[];
};

// const changeIcon = (val: string, list: any[]) => {
//   list.forEach((item) => {
//     if (item.path === val) {
//       item.icon = item.icon ? item.icon + '1' : item.icon
//     } else  {

//     }
//     if (item.children) {
//       changeIcon(val, item.children)
//     }
//   })
// }

//watch

// 跟随页面路由变化，切换菜单选中状态
watch(
  () => currentRoute.fullPath,
  (val: any, old: any) => {
    if (state.collapsed) return;
    state.openKeys = getOpenKeys();
    const meta = currentRoute.meta;
    if (meta?.activeMenu) {
      const targetMenu: any = getTargetMenuByActiveMenuName(meta.activeMenu);
      state.selectedKeys = [targetMenu?.fullPath ?? meta?.activeMenu] as string[];
    } else {
      state.selectedKeys = currentRoute.meta?.parentPath ?
        [currentRoute.meta?.parentPath]
        : ([currentRoute.meta?.activeMenu ?? currentRoute.path] as string[]);
    }
    sysStore.toggleMenuPath(state.openKeys[0]);
    sessionStorage.selectMenuPath = state.openKeys[0];
    let arr: any[] = [];
    menuList.forEach((item: any) => {
      if (val.includes(item.path) || currentRoute.meta?.parentPath == item.path) {
        arr = [item];
      }
    });
    state.childList = arr[0] && arr[0].children ? arr[0].children : [];
    sessionStorage.routerID = currentRoute.meta?.id;
  },
  {
    immediate: true, deep: true
  }
);

watch(
  () => state.openKeys,
  (val, oldVal) => {
    state.preOpenKeys = oldVal;
  }
);
watch(
  () => sysStore.selectMenuPath,
  (val, oldVal) => {

    let index = menuList.findIndex((item) => item.path === val);
    state.childList = menuList[index]?.children || [];
  }
);

//methods
// 切换导航栏文件夹

const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
  sysStore.toggleSidebar(state.collapsed);
};

const loop = (child: any) => {
  child && child.length && child.forEach((item: dataSourceType) => {
    if (item.routePath) {
      menuArr.value.push(item.routePath)
      if (item.children && item.children.length) {
        loop(item.children)
      }
    }
  })
}

//获取菜单的侧边栏
const getMenuArr = () => {
  loop(menus);
}



onMounted(() => {
  getMenuArr()
})
</script>

<style lang="less" scoped>
.collapsedArea {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: absolute;
  bottom: 60px;
  width: 100%;
  height: 48px;
  background: #ffffff;
  box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.02);
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;

  .iconfont {
    font-size: 20px;
    padding-left: 16px;
    color: rgba(0, 0, 0, 0.85);

    &:hover {
      color: var(--theme_button_hover_bg_color, #1f6ded);
    }

    &:active {
      color: var(--theme_button_hover_bg_color, #1f6ded);
    }
  }

  // .ant-btn {
  //   width: 20px;
  //   height: 20px;
  //   padding: 0;
  //   margin-left: 16px;
  // }
}

.aside {
  position: relative;
  height: 100vh;
  width: 184px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  padding-top: 12px;
  transition: width 0.3s;
  box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.02);
  z-index: 1;
}

.collapsed {
  min-width: 60px;
  max-width: 60px;
  transition: width 0.3s;
}

.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border: none;
  height: calc(100vh - 120px);
  overflow-y: auto;
}

:deep(.ant-menu-sub.ant-menu-inline) {
  background-color: #fff;
}

:deep(.ant-menu-item-selected .ant-menu-title-content) {
  border: none;
}

::v-deep(.ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title) {
  width: 168px;
  border-radius: 2px;
}

::v-deep(::-webkit-scrollbar) {
  height: 0;
}

.iconfonts {
  font-size: 24px;
  // color: #000000;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 8px;
}
</style>

<style lang="less">
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  border: none;
}

.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
  margin-top: 8px;
}

.ant-menu-vertical .ant-menu-item:not(:last-child),
.ant-menu-vertical-left .ant-menu-item:not(:last-child),
.ant-menu-vertical-right .ant-menu-item:not(:last-child),
.ant-menu-inline .ant-menu-item:not(:last-child) {
  margin-bottom: 0;
}

.ant-menu-vertical.ant-menu-sub,
.ant-menu-vertical-left.ant-menu-sub,
.ant-menu-vertical-right.ant-menu-sub {
  width: 142px;
  border-radius: 4px;
  min-width: 142px;
  margin-left: 4px;
}

.ant-menu-submenu-placement-rightTop {
  left: 60px !important;
}

.ant-menu-submenu-placement-rightTop .ant-menu-item {
  transform: translateX(8px);
  width: 126px;
}

.ant-menu-item-selected .ant-menu-title-content {
  border: 0;
}

.nav-text {
  cursor: pointer;
}

// .ant-tooltip-placement-right {
//   // display: block !important;
//   left: 60px !important;
//   padding-left: 0;
//   .ant-tooltip-content {
//     margin-left: 4px;
//     width: 142px;

//     .ant-tooltip-arrow {
//       display: none;
//     }
//     .ant-tooltip-inner {
//       border-radius: 4px;
//       line-height: 40px;
//       // padding: 0 8px;
//       background-color: #fff;
//       color: rgba(0, 0, 0, 0.85);
//       .nav-text {
//         padding-left: 8px;
//       }
//     }
//   }
// }
</style>
